<template>
  <div>
    <h3>运行日志</h3>
    <x-table>
      <thead>
        <tr class="table-header">
          <th>时间</th>
          <th>用户</th>
          <th>日志</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="info.length==0" class="table">
          <td>暂无数据</td>
          <td>暂无数据</td>
          <td>暂无数据</td>
        </tr>
        <tr v-for="item in info" :key="item.id" class="table">
          <td>{{item.addTime}}</td>
          <td>{{item.account}}</td>
          <td>{{item.content}}</td>
        </tr>
      </tbody>
    </x-table>
    <div class="pagination">
      <el-pagination background  layout="prev, pager, next" :total="total*size" :pager-count="5" :page-size="size" @current-change="currentChange" @prev-click="currentChange" @next-click="currentChange">
      </el-pagination>
    </div>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { XTable, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    XTable, Loading
  },
  data() {
    return {
      showLoading:false,
      info: [],
      total: 0,
      size: 0,
      page: 0
    };
  },

  mounted() {
    this.getData(1);
  },

  watch:{
    info:function(){
      this.showLoading = false
    }
  },

  methods: {
    getData(page) {
      this.showLoading = true;
      const self = this;
      const param = { page: page };
      const url = "/yitai/admin/user/logs";
      const success = function(response) {
       
        self.info = response.data.info;
        self.total = response.data.total;
        self.size = response.data.size;
        self.page = response.data.page;
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
    },

    currentChange(val) {
      this.getData(val);
    }
  }
};
</script>

<style scoped>
h3 {
  margin-bottom: 20px;
}
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.vux-table:after {
  border-top: 1px solid #888888;
}
.vux-table td:before,
.vux-table th:before {
  border-bottom: 1px solid #888888;
}
.vux-table td:after,
.vux-table th:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #888888;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
.table-header th {
  font-weight: bold;
  font-size: 18px;
}
.table {
  font-size: 18px;
}
.table td {
  padding: 8px 7px;
  text-align: start;
  line-height: 30px;
}

.pagination {
  padding-top: 15px;
  display: flex;
  justify-content: center;
}
</style>